  <template>
  
    <div>
      </br>
      </br>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="根据需求进行统计分析" label-width="200px">
          <el-select v-model="formInline.region" placeholder="条件选择">
            <el-option label="根据成绩人数绘图" value="1"></el-option>
            <el-option label="查看平均分等绘图" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
            </br>
                  </br>
      <!-- 统计图容器 -->
      <div id="main" style="width: 100%;height: 270px;" />
    </div>
  </template>
<script>
import indexApi from '@/api/examination/index.js'
  export default {
    data() {
      return {
        formInline: {
          region: '1'
        }
      }
    },
    methods: {
      onSubmit(){
        if(this.formInline.region==='1'){
            indexApi.getquantity().then(response => {
              this.add(response.data)
            })
        }else{
          indexApi.getavg().then(response => {
              this.avg(response.data)
          })
        }
      },
      add(data) {
      var echarts = require('echarts')
      // 初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'))
      // 配置参数
      var option = {
        title: {
          text: '考核情况'
        },
        tooltip: {},
        legend: {
          data: ['未及格','及格']
        },
        xAxis: {
          name: '分数',
          data: ['未被打分','1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
        },
        yAxis: {name: '人数'},
        series: [{
          type: 'bar',
          data: data.ylist1,
        },
        ]
      }
      myChart.setOption(option)
    },
    avg(data) {
      var echarts = require('echarts')
      // 初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'))
      // 配置参数
      var option = {
        title: {
          text: '考核情况'
        },
        tooltip: {},
        legend: {
          data: ['情况']
        },
        xAxis: {
          name: '情况',
          data: ['最高分', '最低分', '平均分']
        },
        yAxis: {name: '分数'},
        series: [{
          name: '分数',
          type: 'bar',
          data: data.ydata,
        },
        ]
      }
      myChart.setOption(option)
    }
    }
    }
    
</script>